{% block sw_category_layout_card %}
<mt-card
    class="sw-category-layout-card"
    position-identifier="sw-category-layout"
    :title="$tc('sw-category.base.cms.title')"
    :is-loading="isLoading"
>
    <div class="sw-category-layout-card__base-layout">

        {% block sw_category_detail_layout_preview %}
        <div
            class="sw-category-layout-card__preview"
            role="button"
            tabindex="0"
            @click="openLayoutModal"
            @keydown.enter="openLayoutModal"
        >
            <sw-cms-list-item
                :page="cmsPage"
                :disabled="!acl.can('category.editor')"
                active
            />
        </div>
        {% endblock %}

        {% block sw_category_detail_layout_modal %}
        <sw-cms-layout-modal
            v-if="showLayoutSelectionModal"
            :cms-page-types="pageTypes"
            :headline="headline"
            :pre-selection="cmsPage"
            @modal-layout-select="onLayoutSelect"
            @modal-close="closeLayoutModal"
        />
        {% endblock %}

        {% block sw_category_detail_layout_desc %}
        <div class="sw-category-layout-card__desc">

            {% block sw_category_detail_layout_desc_info %}
            <div class="sw-category-layout-card__desc-info">

                {% block sw_category_detail_layout_desc_info_headline %}
                <div
                    class="sw-category-layout-card__desc-headline"
                    :class="{ 'is--empty': !cmsPage }"
                >
                    {{ cmsPage ? cmsPage.name : $tc('sw-category.base.cms.defaultTitle') }}
                </div>
                {% endblock %}

                {% block sw_category_detail_layout_desc_info_subheadline %}
                <div
                    class="sw-category-layout-card__desc-subheadline"
                    :class="{ 'is--empty': !cmsPage }"
                >
                    {{ pageTypeTitle }}
                </div>
                {% endblock %}

            </div>
            {% endblock %}

            {% block sw_category_detail_layout_desc_actions %}
            <div class="sw-category-layout-card__desc-actions">

                {% block sw_category_detail_layout_desc_actions_layout %}
                <mt-button
                    class="sw-category-detail-layout__change-layout-action"
                    size="small"
                    :disabled="!acl.can('category.editor')"
                    variant="secondary"
                    @click="openLayoutModal"
                >
                    {{ cmsPage ? $tc('sw-category.base.cms.changeLayout') : $tc('sw-category.base.cms.changeLayoutEmpty') }}
                </mt-button>
                {% endblock %}

                {% block sw_category_detail_layout_desc_actions_designer %}
                <mt-button
                    class="sw-category-detail-layout__open-in-pagebuilder"
                    size="small"
                    :disabled="!acl.can('category.editor')"
                    variant="secondary"
                    @click="openInPagebuilder"
                >
                    {{ cmsPage ? $tc('sw-category.base.cms.editInPagebuilder') : $tc('sw-category.base.cms.editInPagebuilderEmpty') }}
                </mt-button>
                {% endblock %}

                {% block sw_category_detail_layout_desc_actions_remove %}
                <mt-button
                    v-if="cmsPage"
                    size="small"
                    :disabled="!acl.can('category.editor')"
                    class="sw-category-detail-layout__layout-reset"
                    square
                    variant="secondary"
                    @click="onLayoutReset"
                >
                    <mt-icon
                        name="regular-trash"
                        size="16px"
                    />
                </mt-button>
                {% endblock %}

            </div>
            {% endblock %}

        </div>
        {% endblock %}

    </div>
</mt-card>
{% endblock %}
